<template>
	<div>
		<router-link class="header-abs" to="/" tag="div" v-show="showHeader">
			<i class="iconfont iconfanhui handle-back"></i>
		</router-link>
		<div class="herader-fixed" v-show="!showHeader" :style="itemopacitystyle">
			<router-link to="/">
				<div class="header-left">
					<span class="iconfont iconfanhui back-icon"></span>
				</div>
			</router-link>
			<div class="choose">景点详情</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				showHeader:true,
				itemopacitystyle:{
					opacity:0
				}
			}
		},
		activated() {
			window.addEventListener('scroll',this.handleScroll)
			//监听窗口的scroll事件。一旦触发，则执行自定义的函数：handleScroll
		},
		deactivated() {
			window.removeEventListener('scroll',this.handleScroll)
			//监听窗口的scroll事件。一旦触发，则执行自定义的函数：handleScroll
		},
		methods:{
			handleScroll(){
				// console.log(document.documentElement.scrollTop)
				//这个属性记录了滚动条头部距离屏幕最上方的距离
				var top=document.documentElement.scrollTop
				if(top>20){
					let opacity=top/80
					opacity=opacity>1?1:opacity
					this.itemopacitystyle.opacity=opacity
					this.showHeader=false
				}else{
					this.showHeader=true
				}
			}
		}
	}
</script>

<style lang="stylus" scoped>
	// 1rem=html font-size=50px
	@import '../../assets/styles/varibles.styl'
	.header-abs
		z-index 10
		position absolute
		left .2rem
		top .2rem
		width .8rem 
		height .8rem
		border-radius 50%
		background-color rgba(0,0,0,0.5)
		text-align center
		.handle-back
			color #fff
			font-size .4rem
			line-height .8rem
	.herader-fixed
		z-index 10
		position fixed
		top 0
		left 0
		right 0
		line-height :.65rem
		background-color :$bgColor
		color:#fff
		.header-left
			width:.64rem
			float left
			color #fff
			.back-icon
				margin-left :0.15rem
				font-size :.3rem
		.choose
			text-align center
</style>
